/**
 *  @互联家
 *  @互联家 添加房型页面
 */
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Button, TouchableHighlight } from 'react-native';

import { InputItem, List, Picker, TextareaItem, ImagePicker } from 'antd-mobile-rn';

/**
 *  @style 主要样式导入
 */
import addRoomStyle from "../styles/addRoom";

export default class AddRoomScreen extends Component {

  static navigationOptions = {
    headerTitle: '添加房型',
    headerRight: <View />,
  };

  constructor() {
    super();
    this.state = {
      houseType: [{
        label: '普通公寓',
        value: 'normal'
      }, {
        label: '复式公寓',
        value: 'compound'
      }, {
        label: '连锁酒店',
        value: 'chain'
      }, {
        label: '品牌酒店',
        value: 'brand'
      }],
      house: '',
      roomName: '',
      roomSize: '',
      roomNum: '',
      roomFee: '',
      bedType: [{
        label: '单人床',
        value: 'single'
      }, {
        label: '双人床',
        value: 'double'
      }, {
        label: '大床',
        value: 'big'
      }, {
        label: '主题床',
        value: 'theme'
      }],
      bed: '',
      bedNum: '',
      userNum: '',
      sightType: [{
        label: '无景观',
        value: 'NoLandscape'
      }, {
        label: '全景房',
        value: 'Panorama'
      }, {
        label: '海景房',
        value: 'Seaview'
      }, {
        label: '湖景房',
        value: 'Lakeview'
      }, {
        label: '江景房',
        value: 'Riverview'
      }, {
        label: '其他景观',
        value: 'Also'
      }],
      sight: '',
      decorateType: [{
        label: '简装',
        value: 'simple'
      }, {
        label: '精装',
        value: 'delicate'
      }],
      decorate: '',
      serveType: [{
        label: '提供早餐',
        value: 'serveOne'
      }, {
        label: '提供午餐',
        value: 'serveTwo'
      }, {
        label: '免费洗衣',
        value: 'serveThree'
      }, {
        label: '免费停车',
        value: 'serveFour'
      }, {
        label: '保安',
        value: 'serveFive'
      }, {
        label: '行李寄存',
        value: 'serveSix'
      }],
      serve: '',
      tipType: [{
        label: '15:00之后入住',
        value: 'tipOne'
      }, {
        label: '12:00之前退房',
        value: 'tipTwo'
      }, {
        label: '严禁吸烟',
        value: 'tipThree'
      }, {
        label: '不能带宠物',
        value: 'tipFour'
      }, {
        label: '保持整洁',
        value: 'tipFive'
      }, {
        label: '提供发票',
        value: 'tipSix'
      }, {
        label: '押金¥300.00',
        value: 'tipSeven'
      }, {
        label: '银联标识信用卡',
        value: 'tipEight'
      }, {
        label: '14.00之后入住',
        value: 'tipNine'
      }, {
        label: '接待外宾',
        value: 'tipTen'
      }, {
        label: '允许带宠物',
        value: 'tipElevn'
      }, {
        label: '外卡信用卡',
        value: 'tipTwelve'
      }, {
        label: '允许吸烟',
        value: 'tipThirteen'
      }],
      tip: '',
      feeList: [{
        label: '0',
        value: '0'
      }, {
        label: '50',
        value: '50'
      }, {
        label: '100',
        value: '100'
      }, {
        label: '150',
        value: '150'
      }, {
        label: '200',
        value: '200'
      }],
      fee: ''
    };
  };

  clickBtn = () => {

  };

  render() {
    return (
      <ScrollView style={{ backgroundColor: '#ffffff' }}>

        <List>

          <Picker
            title="请选择公寓类型"
            data={this.state.houseType}
            cols={1}
            value={this.state.house}
            onChange={(value) => {
              this.setState({ house: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              公寓类型
            </List.Item>
          </Picker>

          <InputItem
            clear
            // error
            onErrorPress={() => alert('clicked me')}
            value={this.state.roomName}
            onChange={(roomName) => {
              this.setState({
                roomName,
              });
            }}
            extra=""
            placeholder="请输入房型名称"
          >
            房型名称
          </InputItem>

          <InputItem
            clear
            // error
            onErrorPress={() => alert('clicked me')}
            value={this.state.roomSize}
            onChange={(roomSize) => {
              this.setState({
                roomSize,
              });
            }}
            extra=""
            placeholder="请输入房型面积"
          >
            房型面积
          </InputItem>

          <InputItem
            clear
            // error
            type="number"
            onErrorPress={() => alert('clicked me')}
            value={this.state.roomNum}
            onChange={(roomNum) => {
              this.setState({
                roomNum,
              });
            }}
            extra="间"
            placeholder="请输入房间数量"
          >
            房间数量
          </InputItem>

          <InputItem
            clear
            // error
            type="number"
            onErrorPress={() => alert('clicked me')}
            value={this.state.roomFee}
            onChange={(roomFee) => {
              this.setState({
                roomFee,
              });
            }}
            extra="元"
            placeholder="请输入房间价格"
          >
            价格
          </InputItem>

          <Picker
            title='请选择床铺类型'
            data={this.state.bedType}
            cols={1}
            value={this.state.bed}
            onChange={(value) => {
              this.setState({ bed: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              床铺类型
            </List.Item>
          </Picker>

          <InputItem
            clear
            // error
            type="number"
            onErrorPress={() => alert('clicked me')}
            value={this.state.bedNum}
            onChange={(bedNum) => {
              this.setState({
                bedNum,
              });
            }}
            extra="个"
            placeholder="请输入床铺数量"
          >
            床铺数量
          </InputItem>

          <InputItem
            clear
            // error
            type="number"
            onErrorPress={() => alert('clicked me')}
            value={this.state.userNum}
            onChange={(userNum) => {
              this.setState({
                userNum,
              });
            }}
            extra="个"
            placeholder="请输入人数"
          >
            人数
          </InputItem>

          <Picker
            title='请选择景观类型'
            data={this.state.sightType}
            cols={1}
            value={this.state.sight}
            onChange={(value) => {
              this.setState({ sight: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              景观类型
            </List.Item>
          </Picker>

          <Picker
            data={this.state.decorateType}
            cols={1}
            value={this.state.decorate}
            onChange={(value) => {
              this.setState({ decorate: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              装修风格
            </List.Item>
          </Picker>

          <List.Item arrow="horizontal" last onClick={() => this.props.navigation.navigate('Device')}>
            设施信息
          </List.Item>

          <Picker
            title="请选择服务"
            data={this.state.serveType}
            cols={1}
            value={this.state.serve}
            onChange={(value) => {
              this.setState({ serve: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              服务
            </List.Item>
          </Picker>

          <Picker
            title="请选择入住提示"
            data={this.state.tipType}
            cols={1}
            value={this.state.tip}
            onChange={(value) => {
              this.setState({ tip: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              入住提示
            </List.Item>
          </Picker>

          <Picker
            data={this.state.feeList}
            cols={1}
            value={this.state.fee}
            onChange={(value) => {
              this.setState({ fee: value });
            }}
          >
            <List.Item arrow="horizontal" last>
              服务费用
            </List.Item>
          </Picker>

          <List.Item arrow="empty">
            房型亮点
          </List.Item>

          <TextareaItem rows={4} placeholder="最多300字" count={300} />

          <List.Item arrow="empty">
            房型描述
          </List.Item>

          <TextareaItem rows={4} placeholder="最多300字" count={300} />

          <List.Item arrow="empty">
            房型图片
          </List.Item>

          <ImagePicker
            onChange={this.handleFileChange}
            files={this.state.files}
          />

          <View style={styles.container}>
            <View style={styles.submitBtn}>
              <Button
                onPress={this.clickBtn}
                title="提交"
                color="#0766f1"
                accessibilityLabel="点击提交"
              />
            </View>
          </View>

        </List>

      </ScrollView>
    );
  };

};

const styles = StyleSheet.create(addRoomStyle);